new Vue({
    el: "#app",
    data: {
        school: [],
        ishide: true,
        isdiv: false
    },
    methods: {
        shen() {
            this.school.sort((a, b) => {
                return a.num - b.num;
            })
        },
        jiang() {
            this.school.sort((a, b) => {
                return b.num - a.num;
            })
        },
        add() {
            this.ishide = false;
            this.isdiv = true;
        },
        qx() {
            this.ishide = true;
            this.isdiv = false;
        },
        qr() {
            if (uname.value != "" && url.value && url.value) {
                let sp = { "name": uname.value, "url": url.value, "num": url.value }
                this.school.push(sp)
            }
        }
    },
    created() {
        axios({
            method: 'get',
            url: './js/data.json'
        })
            .then((response) => {
                this.school = response.data;
            });
    },
    //局部组件化
    components: {
        'data-list': {
            //模板语法
            props: ['school'],
            //多个兄弟元素必须给根元素
            template: `<ul>
            <li v-for='sc in school'>
                <img :src="sc.url" alt="">
                <p>{{sc.name}}</p>
                <p>价格：{{sc.num}}</p>
            </li>
        </ul>`
        }
    },
})